import React from 'react'
import {Button, Form, Input} from 'antd';
const {TextArea} = Input;
export default class FormComponent extends React.Component {

    state = {
        ruleForm:{
            val:'ddd',
            textArea:''
        }
    }

    constructor(props) {
        super(props);
        this.formIns = React.createRef();
    }

    /**
     * react是数据驱动视图渲染，是单向渲染，需要我们在change时手动赋值
     * @param textArea
     */
    textAreaChangeHandler = textArea => {
        console.log(textArea);
        this.setState({
            ruleForm:{
                ...this.state.ruleForm,
                textArea: textArea
            }
        });
    }

    onFinish = async value => {
        //获取form表单实例
        try {
            console.log(this.formIns.current);
            //获取通过name指定的信息
            console.log(this.formIns.current.getFieldsValue());
        }catch (error) {
            console.log(error);
        }

        console.log(this.state,'value');
    }

    //antd 中按钮如果在Form中且按钮的htmlType如果是submit则触发表单校验
    //如果校验成功则执行表单的onFinish方法

    render() {

        const footerStyle = {
            display: 'flex',
            justifyContent: 'space-between',
        }

        return (
            <>
                {/*把form的实例挂载给formIns*/}
                <Form ref={this.formIns} onFinish={this.onFinish}>
                    <Form.Item label='任务名称' name='textArea'>
                        <TextArea

                            value={this.state.textArea}
                            onChange={(e) => this.textAreaChangeHandler(e.target.value)}/>
                    </Form.Item>
                    <div style={footerStyle}>
                        <div></div>
                        <Button htmlType={'submit'} type={'primary'} primary={true}>
                            提交就
                        </Button>
                    </div>
                </Form>
            </>
        )
    }

}